<!--
 * @Author: lilongbiao guildwars@qq.com
 * @Date: 2024-03-25 21:48:10
 * @LastEditors: lilongbiao guildwars@qq.com
 * @LastEditTime: 2024-04-07 01:20:57
 * @FilePath: \work-vscode\vue3demo\demo\src\views\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="login">
    <div class="content">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="账号"
          name="username"
          :rules="[{ required: true, message: '请输入账号!' }]"
        >
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 4, span: 16 }">
          <a-checkbox v-model:checked="formState.remember">记住账号密码</a-checkbox>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-button type="primary" html-type="submit">确认</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { $login } from "@/api/login";
import {useRouter} from 'vue-router';
import router from "@/router";
let $router=useRouter();

const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onFinish = async (values) => {
  let {username,password,remember} = values;
  let ret=await $login( {username,password,remember});
  console.log("登录返回:"+ret);
  if(ret){
    $router.push('/layout');
  }
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, rgb(219, 227, 239), rgb(97, 97, 198));
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    padding: 20px;
    width: 500px;
    // height: 250px;
    border: 1px solid #f2f1f1;
    border-radius: 6px;
  }
}
</style>
